<template>
    <div class="chapter">
        <BackTop :height="1000"
                 :bottom="50"
                 :right="0">
            <div class="top">
                <Icon type="md-arrow-round-up" />
            </div>
        </BackTop>

        <!--头部-->
        <Card class="header">
            <Button size="large" type="primary" v-if="openFoldFlag" @click="flagChapter">
                <!--<Icon type="ios-arrow-down"/>-->
                <Icon type="ios-arrow-forward"/>
                展开
            </Button>
            <Button size="large" type="primary" v-if="!openFoldFlag" @click="flagChapter">
                <!--<Icon type="md-menu"/>-->
                <Icon type="ios-arrow-down"/>
                折叠
            </Button>

            <Button size="large" @click="refresh" style="margin-left: 8px">
                <Icon type="md-refresh"/>
                刷新
            </Button>
            </Button>

            <!--章节操作按钮-->
            <div class="btnBox">
                <Button size="large" class="btn" type="success" @click="addChapter">新增章节</Button>
                <Button size="large" class="btn" type="error" @click="delChapter">删除章节</Button>
                <Button size="large" class="btn" type="info" @click="updateChapter">修改章节</Button>
                <Button size="large" class="btn" type="warning" @click="orderChapter">章节排序</Button>
            </div>

        </Card>

        <!--主题内容-->
        <Card class="body">

            <Collapse v-model="chapterIdList">
                <Panel :name="obj.chapterId" v-for="(obj,i) in chapterList" :key="obj.chapterId">
                    <!--折叠面板头-->
                    <span>
                        <span style="font-weight: bolder;margin-right: 18px;color: #000;font-size: 20px">第 {{i+1}} 章</span>
                        <span style="color: #333;font-size: 18px">{{obj.chapterName}}</span>
                        <div style="float: right;">
                            <Button class="status-btn" type="primary" v-if="obj.status==1"
                                    @click.stop="changeStatus(obj)">ON</Button>
                            <Button class="status-btn" type="error" v-if="obj.status==0"
                                    @click.stop="changeStatus(obj)">OFF</Button>
                        </div>
                    </span>

                    <p slot="content">
                        <CourseList :subjectId="subjectId"
                                    :chapterId="obj.chapterId"
                                    :courses="obj.courseList"></CourseList>
                    </p>
                </Panel>
            </Collapse>

        </Card>

        <!--新增章节-->
        <Modal v-model="addChapterFlag"
               draggable
               width="660"
               :loading="loading"
               @on-ok="okAddChapter">
            <p slot="header">
                <span style="color: #FF0000;font-size: 18px">新增章节</span>
            </p>

            <Form :model="chapterInfo" :label-width="100">
                <!--章节名称-->
                <FormItem label="章节名称" style="margin-top: 10px">
                    <Tooltip placement="right" theme="light">
                        <div slot="content">
                            <p>章节名称</p>
                            <p style="color: #F00">30个字符以内</p>
                        </div>
                        <Input prefix="ios-code-working"
                               v-model="chapterInfo.chapterName"
                               placeholder="章节名称"
                               maxlength="30"
                               show-word-limit
                               style="width: 470px"
                               clearable/>
                    </Tooltip>
                </FormItem>

                <!--章节状态-->
                <FormItem label="章节状态" style="margin-top: 20px">
                    <i-switch v-model="chapterInfo.status"
                              size="large"
                              :true-value="1"
                              :false-value="0"
                              false-color="#ff4949">
                        <span slot="open">ON</span>
                        <span slot="close" style="font-size: 14px">OFF</span>
                    </i-switch>
                </FormItem>
            </Form>
        </Modal>

        <!--修改状态询问-->
        <Modal v-model="statusFlag"
               draggable
               width="660"
               :loading="loading"
               @on-ok="okChangeStatus">
            <p slot="header">
                <span style="color: #FF0000;font-size: 18px">修改状态</span>
            </p>

            确定
            <span v-if="chapterInfo.status==0" style="color: #FF0000;font-size: 16px;margin: 0px 8px">上线</span>
            <span v-if="chapterInfo.status==1" style="color: #FF0000;font-size: 16px;margin: 0px 8px">下线</span>
            课程
            <span style="color: #FF0000;font-size: 16px;margin: 0px 8px">《{{chapterInfo.chapterName}}》</span>
            吗?
        </Modal>

        <!--删除章节面板-->
        <Modal v-model="delChapterFlag"
               draggable
               width="380"
               :loading="loading"
               @on-ok="okDelChapter">
            <p slot="header">
                <span style="color: #FF0000;font-size: 18px">删除章节</span>
            </p>

            <!--章节选择-->
            <CheckboxGroup v-model="delChapterIdList">
                <Checkbox v-for="(obj,i) in chapterList"
                          :label="obj.chapterId"
                          style="display: block;margin-bottom: 4px">
                    {{obj.chapterName}}
                </Checkbox>
            </CheckboxGroup>
        </Modal>

        <!--删除确认面板-->
        <Modal v-model="delConfirmFlag"
               draggable
               width="400"
               :loading="loading"
               @on-ok="okDelConfirmChapter"
               @on-cancel="cancelDelConfirmChapter">
            <p slot="header">
                <span style="color: #FF0000;font-size: 18px">删除确认</span>
            </p>

            <div>
                你确定删除以下章节吗?
                <span style="color: #FF0000;font-size: 14px">【慎重删除，删除无法找回】</span>
            </div>

            <div style="margin-left: 8px">
                <CheckboxGroup v-model="delChapterIdList">
                    <Checkbox v-for="(obj,i) in delChapterList"
                              :label="obj.chapterId"
                              disabled
                              style="display: block;margin-bottom: 4px">
                        {{obj.chapterName}}
                    </Checkbox>
                </CheckboxGroup>
            </div>
        </Modal>

        <!--修改章节-->
        <Modal v-model="updateChapterFlag"
               draggable
               width="660"
               :loading="loading"
               @on-ok="okUpdateChapter"
               @on-cancel="cancelUpdateChapter">
            <p slot="header">
                <span style="color: #FF0000;font-size: 18px">编辑章节</span>
            </p>

            <RadioGroup v-model="chapterId" style="margin: 0px 0px 0px 40px">
                <Radio v-for="(obj,i) in chapterList"
                       :label="obj.chapterId"
                       style="display: block;margin-top: 6px">

                    <span>
                        <!--未选中时的展示的章节名称-->
                        <span v-if="chapterId!=obj.chapterId">{{obj.chapterName}}</span>

                        <Tooltip v-if="chapterId==obj.chapterId"
                                 placement="right"
                                 theme="light">
                            <div slot="content">
                                <p>章节名称</p>
                                <p style="color: #F00">30个字符以内</p>
                            </div>
                            <Input v-model="obj.chapterName"
                                   placeholder="章节名称"
                                   maxlength="30"
                                   show-word-limit
                                   style="width: 480px"
                                   clearable/>
                        </Tooltip>
                    </span>

                </Radio>
            </RadioGroup>
        </Modal>

        <!--排序章节-->
        <Modal v-model="orderChapterFlag"
               draggable
               width="800"
               @on-ok="okOrder">
            <p slot="header">
                <span style="color: #FF0000;font-size: 18px">章节排序</span>
            </p>

            <Table :columns="chapterListData"
                   :data="chapterList"
                   show-header
                   draggable
                   border
                   @on-drag-drop="dragOrder"
                   size="small">

                <!--章节名称-->
                <template slot-scope="{ row, index }" slot="chapterName">
                    <span>{{row.chapterName}}</span>
                </template>

                <!--排序-->
                <template slot-scope="{ row, index }" slot="order">
                    <Button type="warning"
                            class="btn"
                            @click="order(row,index)">
                        排序
                    </Button>
                    <div class="order" v-if="chapterId==row.chapterId">
                        将该章节放置到
                        <InputNumber :max="chapterList.length"
                                     :min="1"
                                     style="width: 100px;margin: 0px 8px"
                                     v-model="tmpIndex"></InputNumber>
                        前
                    </div>
                </template>
            </Table>
        </Modal>

    </div>
</template>

<script>
    import CourseList from "@/components/course/CourseList"

    export default {
        name: "",
        props: {
            subjectId: {}
        },
        components: {
            CourseList
        },
        data() {
            return {
                obj: {
                    subjectId: this.subjectId,
                },
                //章节目录
                chapterList: [],
                chapterTmpList: [],
                //课时列表
                courseList: [],
                chapterId: "",
                //章节id
                chapterIdList: [],
                delChapterList: [],
                delChapterIdList: [],
                //章节对象
                chapterInfo: {
                    chapterId: "",
                    subjectId: "",
                    chapterName: "",
                    status: 0,
                    showOrder: 0,
                },
                //展开还是折叠  true 默认折叠
                openFoldFlag: true,
                //新增章节提示面板
                addChapterFlag: false,
                loading: true,
                //修改状态提示面板
                statusFlag: false,
                //删除章节提示面板
                delChapterFlag: false,
                //删除确认
                delConfirmFlag: false,
                //修改章节提示面板
                updateChapterFlag: false,

                chapterListData: [
                    {title: "序号", type: 'index', resizable: true, align: "center", width: 100},
                    {title: "章节名称", slot: 'chapterName', key: 'chapterName', align: "left"},
                    {title: "排序", slot: 'order', resizable: true, align: "center", width: 370},
                ],
                //排序提示面板
                orderChapterFlag: false,
                //排序询问
                orderFlag: false,
                index: 0,
                //放置索引
                tmpIndex: 1,
            }
        },
        methods: {
            //刷新
            refresh: function () {
                this.$Spin.show();
                this.selectChapterListBySubjectId();
                setTimeout(() => {
                    this.$Spin.hide();
                }, 500);
            },
            //查询章节目录和课程
            selectChapterListBySubjectId: function () {
                this.axios.get(`/course/chapter/chapterListAndCourseList/${this.subjectId}`)
                    .then((data) => {
                        this.chapterList = data.data
                    })
            },
            //展开或者折叠章节
            flagChapter: function () {
                this.openFoldFlag = !this.openFoldFlag
                //true 默认 折叠
                if (this.openFoldFlag) {
                    this.chapterIdList = []
                } else {
                    this.chapterList = this.chapterList
                    this.chapterList.forEach(i => {
                        this.chapterIdList.push(i.chapterId)
                    })
                }
            },
            //新增章节
            addChapter: function () {
                this.addChapterFlag = true
            },
            //新增章节确定
            okAddChapter: function () {
                let data = {
                    subjectId: this.subjectId,
                    chapterName: this.chapterInfo.chapterName,
                    status: this.chapterInfo.status
                }
                this.axios.post(`/course/chapter/chapter`, data)
                    .then((data) => {
                        if (data.code == 200) {
                            this.$Message.success({
                                background: true,
                                closable: true,
                                duration: 2,
                                content: '章节添加成功'
                            });
                            this.selectChapterListBySubjectId();
                            this.addChapterFlag = false
                            this.chapterInfo.chapterName = ""
                            this.chapterInfo.status = 0
                        }
                    })
            },
            //删除章节
            delChapter: function () {
                this.delChapterFlag = true
            },
            //删除章节
            okDelChapter: function () {
                this.delConfirmFlag = true
                this.delChapterFlag = false
                //赋值
                for (let i of this.chapterList) {
                    for (let j of this.delChapterIdList) {
                        if (j == i.chapterId) {
                            this.delChapterList.push(i);
                        }
                    }
                }
            },
            //删除确认
            okDelConfirmChapter: function () {
                let ids = this.delChapterIdList
                this.axios.post(`/course/chapter/chapter/ids/${this.subjectId}`, ids)
                    .then((data) => {
                        if (data.code == 200) {
                            this.$Message.success({
                                background: true,
                                closable: true,
                                duration: 2,
                                content: '章节户删除成功'
                            });
                            this.delConfirmFlag = false
                            this.delChapterList = []
                            this.delChapterIdList = []
                            this.selectChapterListBySubjectId()
                        }
                    })
            },
            //删除确认 取消
            cancelDelConfirmChapter: function () {
                this.delConfirmFlag = false
                this.delChapterFlag = true
                this.delChapterList = []
            },
            //修改章节
            updateChapter: function () {
                this.updateChapterFlag = true
                this.chapterId = ""
            },
            //修改章节
            okUpdateChapter: function () {
                for (let i of this.chapterList) {
                    if (this.chapterId == i.chapterId) {
                        this.chapterInfo = i
                    }
                }
                let data = {
                    chapterId: this.chapterInfo.chapterId,
                    chapterName: this.chapterInfo.chapterName.trim()
                }
                if (data.chapterName == "") {
                    this.$Message.error({
                        background: true,
                        closable: true,
                        duration: 2,
                        content: '章节名称不能成功'
                    });
                    return
                }
                this.axios.put(`/course/chapter/chapter/${this.chapterInfo.chapterId}`, data)
                    .then((data) => {
                        if (data.code == 200) {
                            this.$Message.success({
                                background: true,
                                closable: true,
                                duration: 2,
                                content: '章节修改成功'
                            });
                            this.selectChapterListBySubjectId()
                            this.updateChapterFlag = false
                            this.chapterId = ""
                        }
                    })
            },
            //取消修改章节
            cancelUpdateChapter: function () {
                this.selectChapterListBySubjectId()
            },
            //修改状态
            changeStatus: function (obj) {
                this.chapterInfo = obj
                this.statusFlag = true
            },
            //修改状态
            okChangeStatus: function () {
                let status;
                if (this.chapterInfo.status == 0) {
                    status = 1
                }
                if (this.chapterInfo.status == 1) {
                    status = 0
                }
                let data = {
                    chapterId: this.chapterInfo.chapterId,
                    status: status
                }
                this.axios.put(`/course/chapter/chapter/${this.chapterInfo.chapterId}`, data)
                    .then((data) => {
                        if (data.code == 200) {
                            this.$Message.success({
                                background: true,
                                closable: true,
                                duration: 2,
                                content: '状态修改成功'
                            });
                            this.statusFlag = false
                            this.selectChapterListBySubjectId()
                        }
                    })
            },
            //章节排序
            orderChapter: function () {
                this.orderChapterFlag = true
                this.chapterId = ""
            },
            //点击排序
            order: function (row, index) {
                this.chapterId = row.chapterId
                this.chapterInfo = row
                this.index = index
            },
            //确定排序
            okOrder: function () {
                let number = this.tmpIndex - this.index;
                if (number == 1 || number == 2) {
                    this.$Message.error({
                        background: true,
                        closable: true,
                        duration: 2,
                        content: '请勿将本条数据原地移动'
                    });
                    return
                }
                if (this.tmpIndex > this.index) {
                    this.tmpIndex--
                }
                let tmpChapterList = this.chapterList;
                tmpChapterList.delete(this.index)
                tmpChapterList.insert(this.tmpIndex, this.chapterInfo)

                let ids = []
                for (let i = 0; i < this.chapterList.length; i++) {
                    ids.push(this.chapterList[i].chapterId)
                }

                this.axios.put(`/course/chapter/order/${this.subjectId}`, ids)
                    .then((data) => {
                        this.$Message.warning({
                            background: true,
                            closable: true,
                            duration: 2,
                            content: '章节排序成功'
                        });
                    })
            },
            //拖拽排序
            dragOrder: function (fromIndex, toIndex) {
                this.chapterInfo = this.chapterList[fromIndex];
                this.index = fromIndex;
                this.tmpIndex = toIndex + 1;
                this.okOrder()
                this.orderChapterFlag = false
            },
        },
        mounted() {
            this.selectChapterListBySubjectId()
        }
    }
</script>

<style scoped>
    /*返回顶部*/
    .top{
        height: 40px;
        width: 60px;
        line-height: 20px;
        background: rgba(0, 153, 229, .7);
        color: #fff;
        text-align: center;
        border-radius: 2px;
    }

    /*章节操作*/
    .chapter .header .btnBox {
        float: right;
    }

    .chapter .header .btnBox .btn {
        margin-left: 50px;
    }

    /*主要内容操作*/
    .chapter .body {
        margin-top: 10px;
    }

    /*主要内容操作*/
    .chapter .body .status-btn {
        width: 60px;
        margin-right: 4px;
    }

    /*排序*/
    .order {
    }

    .btn {
        float: left;
    }

    /*排序询问*/
    .order {
        float: left;
        margin-left: 10px;
    }

</style>